<template>
  <div v-if="title" class="data-table-title">{{ title }}</div>
  <br v-else />
  <table class="data-table">
    <tbody>
      <template v-for="(data, index) in dataList" :key="index">
        <tr class="data-row">
          <th class="data-item data-item-label">
            <div class="dot"></div>
            <span style="margin-left: 3vw">{{ data.label }}</span>
          </th>
        </tr>
        <tr class="data-row">
          <td class="data-item data-item-content">{{ data.content }}</td>
        </tr>
      </template>
    </tbody>
  </table>
</template>

<script setup lang="ts">
const props = defineProps<{
  title?: string
  dataList: Array<{ label: string; content: string }>
}>()
const { dataList, title } = toRefs(props)
</script>

<style scoped>
.data-table-title {
  width: 100%;
  font-weight: bold;
  padding: 2vh 0;
  font-size: 4.6vw;
}
.data-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-weight: normal;
  border: 1px solid rgba(5, 5, 5, 0.06);
  margin-bottom: 2vh;
}
.data-row {
  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
}
.data-item {
  line-height: 5vw;
  padding: 2.5vw 2vw;
  border-inline-end: 1px solid rgba(5, 5, 5, 0.06);
}
.data-item-label {
  width: 22vw;
  text-align: left;
  vertical-align: middle;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.02);
  position: relative;
}
.data-item-content {
  color: rgba(0, 0, 0, 0.65);
  text-indent: 3vw;
}
.dot {
  position: absolute;
  background-color: #000;
  height: 1.5vw;
  width: 1.5vw;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}
</style>
